<template>
  <div>
    <num-scroll :count="total"></num-scroll>
    <br />
    <div class="iCountUp">
      <ICountUp :delay="delay" :endVal="endVal" :options="options" @ready="onReady" />
    </div>
  </div>
</template>

<script>
import numScroll from "./counterChild";
import ICountUp from "vue-countup-v2";
export default {
  data() {
    return {
      total: 0,
      delay: 5000,
      endVal: 6666,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: "",
        decimal: ".",
        prefix: "",
        suffix: ""
      }
    };
  },
  components: { numScroll, ICountUp },
  created() {
    this.totalAnimation();
  },
  methods: {
    onReady(instance, CountUp) {
      const that = this;
      instance.update(that.endVal);
    },
    totalAnimation() {
      this.timer = setInterval(() => {
        this.total = 0;
        setTimeout(() => {
          // this.findAllTBAccount()
          this.total = 123;
        }, 1000);
      }, 15000);
    }
  }
};
</script>

<style scoped lang="scss">
.iCountUp {
  font-size: 6em;
  margin: 0;
  color: #4d63bc;
}
</style>
